<template>
	<view class='zazhi'>
		<view class="status_bar"></view>
		<view class="content">
			<view class="title"><text>{{contents.title1}}</text></view>
			<view class="desc">
				<text>{{contents.title2}}</text>
				<text>时间：{{contents.date}}</text>
			</view>
			<view class="info">
				<!-- <view class='info_title'><text>【直播介绍】</text></view> -->
				<rich-text :nodes="contents.article"></rich-text>
			</view>
			<view class="desc">
				<text>分享 {{contents.shared}}</text>
				<text>阅读 {{contents.readNum}}</text>
			</view>
		</view>
		<!-- 评论 -->
		<Comments 
			:ids="opt.id" 
			:contents="contents" 
			@refresh="getContent" 
			ref="Comments"
		></Comments>
		<view class='download'>
			<image src="../../static/img/down.png" mode="widthFix"></image>
			<text class='downtext'>下载APP查看更多精彩内容</text>
			<view class='downbtn'><text>下载</text></view>
		</view>
		<!-- <uni-share :shareShow="shareShow" @cancelshow="this.shareShow=false"></uni-share> -->
	</view>
</template>

<script> 
	import uniShare from "@/components/uni-share.vue"
	import Comments from "@/components/comments.vue"
	import {
		content,
	} from '@/utils/api' 
	
	export default {
		components: {uniShare,Comments},
		data() {
			return {
				shareShow:false,
				contents:{} ,//详情内容
				opt:{} 
			}
		},
		methods: {
			//获取详情内容
			async getContent(){
				let data = await content(this.opt)
				if(data.status == 0){
					this.contents = data.data
				}
			},	
		}, 
		mounted() {
  
		},
		onNavigationBarButtonTap(e){
			if(e.key=='share'){
				this.shareShow = true
			}
		},
		onLoad(opt){
			uni.setNavigationBarTitle({
			　　title:'文章详情'
			})
			this.opt = opt
			this.getContent()
		},
		onReachBottom(){

		}
	}
</script>

<style lang="scss">
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.download{
		padding: 39upx 31upx;
		padding-top: 50upx;
		height: 290upx;
		background:linear-gradient(0deg,rgba(255,255,255,1) 70%,rgba(255,255,255,0) 100%);
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		box-sizing: border-box;
		image{
			width: 35upx;
		}
		.downtext{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.downbtn{
			height:88upx;
			background:linear-gradient(135deg,rgba(131,175,238,1) 0%,rgba(168,127,251,1) 100%);
			border-radius:4upx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text{
				font-size:34upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
			}
		}
	}
	.zazhi{
		padding-bottom: 130upx;
		.content{
			padding: 36upx 32upx 10upx;
			.title{
				margin-bottom: 30upx;
				text{
					font-size:34upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.desc{
				margin-bottom: 15upx;
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				line-height:36upx;
				display: flex;
				justify-content: space-between;
			}
			
			.info{
				.info_title{
					margin-left:-12upx;
				}
				text{
					font-size:28upx;
					font-family:PingFang SC;
					color:#333;
				}
			}
		}
	}
</style>
